import React, { Component } from "react";

import easydata from "@/mock/easy";
import images_1 from "@/assets/images/myswiper/1.jpg";
import images_2 from "@/assets/images/myswiper/2.jpg";
import images_3 from "@/assets/images/myswiper/3.jpg";
import images_4 from "@/assets/images/myswiper/4.jpg";
import images_5 from "@/assets/images/myswiper/5.jpg";
import { get } from "@/Utils/http";
import { connect } from "react-redux";

import { setmocklist } from "@/reducer/mock";

let imageList = [images_1, images_2, images_3, images_4, images_5];
// mock数据
export default connect(({ mockList }) => ({ mockList }), {
  // setmocklist(payload) {
  //   return (dispatch, _, { get }) => {
  //     return new Promise((reslove, reject) => {
  //       dispatch({type: "SETMOCKLIST", payload: { status: "loading" }});
  //     });
  //   };
  // },
  setmocklist,
})(
  class Usermanage extends Component {
    state = {
      list: [],
    };
    componentDidMount() {
      if (this.props.mockList.mockList.length <= 0) {
        this.props.setmocklist();
      }

      // get("/api/mock/easyData", {}).then((res) => {
      //   console.log(res);
      //   this.setState({
      //     list: res,
      //   });
      // });
    }
    render() {
      return (
        <div>
          <h3>mock数据</h3>
          <table border="1" width="800">
            <thead>
              <tr>
                <th>ID</th>
                <th>NAME</th>
                <th>AGE</th>
                <th>SEX</th>
                <th>DATE</th>
                <th>STAR</th>
                <th>ADDRESS</th>
                <th>IMAGES</th>
              </tr>
            </thead>
            <tbody>
              {this.props.mockList.mockList &&
                this.props.mockList.mockList.map((v) => {
                  return (
                    <tr key={v.ID}>
                      <th>{v.ID}</th>
                      <th>{v.NAME}</th>
                      <th>{v.AGE}</th>
                      <th>{v.SEX}</th>
                      <th>{v.DATE}</th>
                      <th>{v.STAR}</th>
                      <th>{v.ADDRESS}</th>
                      <th>
                        <img src={v.IMG} alt="" width="100px" height="50px" />
                        <img src={imageList[v.IMAGES]} alt="" width="100px" />
                      </th>
                    </tr>
                  );
                })}
            </tbody>
          </table>
        </div>
      );
    }
  }
);
